import React, { useEffect, useState, Key } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  Button,
  Form,
  Input,
  Space,
  Card,
  Table,
  Tooltip,
  Modal,
  message,
} from 'antd';
import {
  SearchOutlined,
  EditOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';

import {
  reqGetHospitalSets,
  reqDelHospitalSet,
  reqAllDelHospitalSet,
} from '@api/hospital/hospitalSet';
import {
  IhospitalSets,
  IhospitalSet,
} from '@api/hospital/hospitalSet/model/hospitalSetTypes';

/* const columns: ColumnsType<DataType> = [
  {
    title: 'Name', // 表头展示的信息
    //在有render的情况下，写了dataIndex属性，则该值决定了render函数第一个参数接收到什么数据
    //如果不写dataIndex，则render函数的第一个参数就是data中的每一个数据对象
    dataIndex: 'name',
    key: 'name',
    //render属性可以设置了这一列要展示的数据，由render函数返回值决定
    //如果不写render，则由dataIndex的属性值来决定展示什么值
    render: (text, record, index) => {
      //text则是收到dataIndex的影响
      //record是data数组中的每一个数据对象
      //index是data数组中的每一个数据对象下标
      console.log(text, record, index);
      return 1
    },
  },
] */

let query = false; //false表示用户没有点击查询

const { confirm } = Modal;

export default function HospitalSet() {
  const navigate = useNavigate();
  //创建Form实例
  const [form] = Form.useForm();
  const [hospitalSets, setHospitalSets] = useState<IhospitalSets>([]);
  //储存数据表格总数的状态
  const [total, setTotal] = useState(0);
  //存储一页多少条的状态
  const [pageSize, setPageSize] = useState(5);
  //控制表格展示加载效果
  const [loading, setLoading] = useState(false);
  //存储页码状态
  const [page, setPage] = useState(1);

  //储存表格中选中的复选框id
  const [ids, setIds] = useState<Key[]>([]);

  //useEffect回调是不能被定义为异步函数
  useEffect(() => {
    getHospitalSets(1, 5); //页面打开就获取数据，分页以后在获取一次
  }, []);

  async function getHospitalSets(page: number, pageSize: number) {
    setLoading(true); //数据发请求时加载效果
    let result;
    if (query) {
      //为true则添加筛选
      //表单中两个文本框的值
      //通过form组件上的useForm创建实例对象,可以操作表单内容，绑定相应Form组件
      const { hosname, hoscode } = form.getFieldsValue();
      result = await reqGetHospitalSets(page, pageSize, hosname, hoscode);
    } else {
      //为false则不添加筛选
      result = await reqGetHospitalSets(page, pageSize);
    }

    //console.log(result);
    //存储表格数据
    setHospitalSets(result.records);
    //存储表格总数
    setTotal(result.total);

    setLoading(false); //数据请求完成，停止加载效果
  }

  //表单中查询提交按钮的事件处理
  const onFinish = () => {
    //console.log('Success:', values);
    query = true; //点击查询query为true
    getHospitalSets(1, pageSize);
    setPage(1); //让页码1高亮
  };

  //清空按钮的事件处理
  const clearForm = () => {
    query = false; //点击清空，query为false
    // 1. 清空表单中表单元素的值
    form.setFieldsValue({ hosname: undefined, hoscode: undefined });
    // 2. 再次发请求，重新获取数据
    getHospitalSets(1, pageSize);
    setPage(1); //让页码1高亮
  };

  //点击删除，弹出是否确定删除的对话框
  const showConfirm = (id: string) => () => {
    confirm({
      title: '是否确定删除？',
      icon: <ExclamationCircleOutlined />,
      async onOk() {
        //发送请求,删除数据
        await reqDelHospitalSet(id);
        //提示用户删除成功
        message.success('删除医院成功');
        //手动从新获取数据
        getHospitalSets(page, pageSize);
      },
      /* onCancel() {
        console.log('Cancel');
      }, */
    });
  };

  //批量删除表格数据
  const batchDelete = () => {
    confirm({
      title: '是否确定要全部删除？',
      icon: <ExclamationCircleOutlined />,
      async onOk() {
        await reqAllDelHospitalSet(ids);
        //提示用户
        message.success('删除所选医院数据成功');
        getHospitalSets(page, pageSize);
      },
    });
  };

  const columns: ColumnsType<IhospitalSet> = [
    {
      title: '序号',
      render(a, b, index) {
        return index + 1;
      },
      width: 80,
      align: 'center',
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '医院编码',
      dataIndex: 'hoscode',
    },
    {
      title: 'api基础路径',
      dataIndex: 'apiUrl',
    },
    {
      title: '签名',
      dataIndex: 'signKey',
    },
    {
      title: '联系人名称',
      dataIndex: 'contactsName',
    },
    {
      title: '联系人手机号',
      dataIndex: 'contactsPhone',
    },
    {
      title: '操作',
      render(data) {
        return (
          <Space>
            <Tooltip title='修改医院'>
              <Button
                icon={<EditOutlined />}
                type='primary'
                onClick={() => {
                  navigate(`/syt/hospital/hospitalSet/edit`, {
                    state: data,
                  });
                }}
              ></Button>
            </Tooltip>
            <Tooltip title='删除医院'>
              <Button
                icon={<DeleteOutlined />}
                type='primary'
                danger
                onClick={showConfirm(data.id)}
              ></Button>
            </Tooltip>
          </Space>
        );
      },
      //表示这一列在最右边固定不动
      fixed: 'right',
      width: 105,
    },
  ];

  return (
    <Card>
      <Form
        onChange={() => {
          //只要是表单中任何一个元素改变了。这个事件就会被触发
          query = false; //只要修改了表单元素，query就设置为false
        }}
        form={form}
        layout='inline' //表示当前表单元素要在一行显示
        name='basic' //form组件名称
        onFinish={onFinish}
      >
        <Form.Item name='hosname'>
          <Input placeholder='医院名称' />
        </Form.Item>

        <Form.Item name='hoscode'>
          <Input placeholder='医院编号' />
        </Form.Item>

        <Form.Item>
          <Space>
            {/* type表示按钮的主题颜色 */}
            <Button type='primary' htmlType='submit' icon={<SearchOutlined />}>
              查询
            </Button>
            <Button onClick={clearForm}>清空</Button>
          </Space>
        </Form.Item>
      </Form>
      <Space style={{ marginTop: 15, marginBottom: 15 }}>
        <Button
          type='primary'
          onClick={() => {
            navigate(`/syt/hospital/hospitalSet/add`);
          }}
        >
          添加
        </Button>
        <Button
          type='primary'
          danger
          disabled={!ids.length}
          onClick={batchDelete}
        >
          批量删除
        </Button>
      </Space>
      {/* bordered给表格添加边框 */}
      <Table
        columns={columns}
        dataSource={hospitalSets}
        bordered
        //scroll ={{x:1500}},x表示可以水平滚动条，1500表示可以滚动的距离
        scroll={{
          x: 1500,
        }}
        rowKey='id'
        pagination={{
          current: page, //current决定了页码高亮
          total, //给分页器数据总页数
          pageSize, //每页五条数据
          showTotal(total) {
            return `总共${total}条`;
          },
          //显示一个下拉框，控制一页展示多少条数据，也就是修改pageSize
          showSizeChanger: true,
          pageSizeOptions: [2, 5, 10],
          //展示一个跳转页面
          showQuickJumper: true,

          //监听用户操作监听器
          //只要操作分页器，就会触发onChange
          onChange(page, pageSize) {
            setPageSize(pageSize);
            setPage(page); //高亮点击的页码
            //给服务器发请求获取数据
            getHospitalSets(page, pageSize);
          },
        }}
        //控制表格正在加载的样式
        loading={loading}
        //添加复选框在表格中
        rowSelection={{
          //只要用户点击了复选框就会触发
          onChange(selectedRowkeys, selectedRows) {
            //console.log(selectedRowkeys, selectedRows);
            setIds(selectedRowkeys);
          },
        }}
      />
    </Card>
  );
}
